<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    <title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
</h:head>
<h:body>
    <ui:composition template="/pages/common/commonLayout.xhtml">

        <ui:define name="content">


            <h:form id="form1">

                <p:dataTable var="car" value="#{productMB.lazyModel}" paginator="true" rows="10"   resizableColumns="true"

                    widgetVar="carTable"   emptyMessage="No products found with given criteria"   rowsPerPageTemplate="5,10,15"
                    selectionMode="single" sortMode="single" selection="#{productMB.selectedProduct}" id="dataTable" lazy="true"
                    filteredValue="#{productMB.filteredResults}" paginatorPosition="top" >

                    <p:ajax event="rowSelect" listener="#{productMB.onRowSelect}"  oncomplete="productDialog.show()" />
                    <f:facet name="header" >
                        <p:outputPanel>
                            <h:outputText value="Search all fields:" />
                            <p:inputText id="globalFilter" onkeyup="carTable.filter()" style="width:250px" />
                            <p:spacer width="100" height="10" />
                            <p:commandButton value="New" onclick="composeDlg.show()" type="button" icon="ui-icon-document"/>
                        </p:outputPanel>
                    </f:facet>

                    <p:column headerText="Name" sortBy="name"  filterMatchMode="contains">
                    <h:outputText value="#{car.name}" />
                </p:column>
                    <p:column headerText="Category" sortBy="category"  filterMatchMode="contains">
                        <h:outputText value="#{car.category.name}" />
                    </p:column>

                    <p:column headerText="Sale Price" sortBy="salePrice" >
                        <h:outputText value="#{car.salePrice}" />
                    </p:column>

                    <p:column headerText="Stock Quantity" sortBy="stockQuantity" >
                        <h:outputText value="#{car.stockQuantity}" />
                    </p:column>

                </p:dataTable>
            </h:form>
            <h:form id="form">
                <p:dialog widgetVar="composeDlg"  header="New Product" width="630" maximizable="true" minimizable="true">
                    <p:panelGrid columns="2">

                    <h:outputLabel for="name" value="Name : " />
                            <p:inputText id="name" value="#{productMB.name}">
                                <f:validateLength minimum="5" />
                     </p:inputText>

                        <h:outputLabel for="category" value="Category : " />
                        <p:inplace  editor="true" label="Add" id="category">

                            <p:autoComplete id="acSimple" value="#{orderMB.selectedProduct}"
                                            completeMethod="#{productMB.complete}"  var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="#{productConverter}" forceSelection="false">
                                <p:column>
                                    <p:graphicImage value="/images/icons/product.png" width="32" height="32"/>
                                </p:column>
                                <p:column>
                                    #{p.name}
                                </p:column>
                             </p:autoComplete>
                        </p:inplace>

                        
                        <h:outputLabel for="salePrice" value="Sale Price : " />
                        <p:inputText id="salePrice" value="#{productMB.salePrice}">
                        </p:inputText>


                        <h:outputLabel for="quantity" value="Quantity : " />
                        <p:inputText id="quantity" value="#{productMB.quantity}">
                        </p:inputText>

                            <h:outputLabel for="reorderQuantity" value="Reorder Qty : " />
                            <p:inputText id="reorderQuantity" value="#{productMB.reorderQuantity}">
                            </p:inputText>


                            <h:outputLabel for="unitType" value="Unit : " />
                            
                                <p:selectOneMenu value="#{productMB.unitType}" id="unitType">

                                    <f:selectItems value="#{productMB.unitTypes}" var="c"
                                                   itemLabel="#{c.name}" itemValue="#{c.id}" />
                                </p:selectOneMenu>


                            <h:outputLabel for="description" value="Description : " />
                            
                                <p:inputTextarea id="description" rows="5" cols="30" value="#{productMB.description}" counter="counter" maxlength="100"
                                                 counterTemplate="{0} characters remaining." autoResize="false">

                                                 </p:inputTextarea >
                                <h:outputText id="counter" />



                        <f:facet name="footer">
                            <p:commandButton id="loginButton" value="Save" update=":msg ,:form1:dataTable"  icon="ui-icon-disk"
                                             actionListener="#{productMB.addProduct}"
                                             oncomplete="handleLoginRequest(xhr, status, args)"/>
                            <p:commandButton value="Cancel" onclick="composeDlg.hide()" type="button" icon="ui-icon-close"/>
                        </f:facet>



                    </p:panelGrid>
                </p:dialog>
            </h:form>
            <h:form id="form2">

                <p:dialog header="Product Detail" widgetVar="productDialog" resizable="true"
                          showEffect="explode" hideEffect="explode" maximizable="true" minimizable="true">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <f:facet name="header">
                            <p:graphicImage value="/images/cars/#{productMB.selectedProduct.id}.jpg"/>
                        </f:facet>

                        <h:outputText value="Name:" />
                        <h:outputText value="#{productMB.selectedProduct.name}" style="font-weight:bold"/>

                        <h:outputText value="Sales Price:" />
                        <h:outputText value="#{productMB.selectedProduct.salePrice}" style="font-weight:bold"/>

                        <h:outputText value="Stock Quantity:" />
                        <h:outputText value="#{productMB.selectedProduct.stockQuantity}" style="font-weight:bold"/>

                        <h:outputText value="Description:" />
                        <h:outputText value="#{productMB.selectedProduct.description}" style="font-weight:bold"/>


                    </h:panelGrid>
                </p:dialog>

            </h:form>


            <p:growl id="msg" />
            <script type="text/javascript">
                function handleLoginRequest(xhr, status, args) {
                if(args.validationFailed || !args.loggedIn) {
                composeDlg.jq.effect("shake", { times:5 }, 100);
                }
                else {
                composeDlg.hide();

                }
                }
            </script>
        </ui:define>





    </ui:composition>
</h:body>

</html>
